<template>
  <!-- 添加局部容器，并监听滚动事件 -->
  <div ref="scrollContainer" class="scroll-container" @scroll="handleScroll">
    <div class="table-container box-border px-30px">
      <div class="table-header">
        <div v-for="column in tableColumns" :key="column.dataIndex" class="header-cell">
          {{ column.title }}
        </div>
      </div>

      <div class="table-body">
        <div v-for="(item, index) in dataList" :key="index" class="table-row">
          <div v-for="column in tableColumns" :key="column.dataIndex" class="body-cell">
            {{ column.dataIndex === 'index' ? index + 1 : item[column.dataIndex] }}
          </div>
        </div>
      </div>

      <!-- 加载提示 -->
      <div v-if="loading" class="loading-text">加载中...</div>
      <div v-if="finished && dataList.length !== 0" class="finished-text">没有更多了</div>

      <div v-if="!loading && dataList.length === 0" class="flex flex-col items-center py-40px">
        <img src="@/assets/images/empty.png" alt="无数据" class="w-300px h-300px" />
        <div class="text-38px mt-20px text-[#999]">无数据</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useConfigStore } from '@/store/modules/config'
import { pointsList } from '@/api/index'
const configStore = useConfigStore()

// 添加滚动容器的 ref
const scrollContainer = ref(null)
const props = defineProps({
  no: String,
  zonghe: Boolean
})
const curTopic = configStore.topics
const tableColumns1 = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '积分点',
    dataIndex: 'locationName'
  },
  {
    title: '积分时间',
    dataIndex: 'creatTime'
  },
  {
    title: '获得积分',
    dataIndex: 'curPoints'
  }
]
const tableColumns2 = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '主题',
    dataIndex: 'subjectName'
  },
  {
    title: '积分点',
    dataIndex: 'locationName'
  },
  {
    title: '获得积分',
    dataIndex: 'curPoints'
  }
]
const tableColumns = ref(!props.zonghe ? tableColumns1 : tableColumns2)
const dataList = ref([])
const loading = ref(false)
const finished = ref(false)
const pageNo = ref(1)
const pageSize = 10

// 滚动事件处理
const handleScroll = () => {
  const container = scrollContainer.value
  if (
    container.scrollTop + container.clientHeight >= container.scrollHeight - 50 &&
    !loading.value &&
    !finished.value
  ) {
    loadMore()
  }
}

const loadMore = async () => {
  if (finished.value) return
  loading.value = true
  try {
    const res = await pointsList({
      queryData: props.no,
      subjectId: props.zonghe ? null : curTopic.subjectId,
      pageNum: pageNo.value,
      pageSize: pageSize
    })

    if (res.data && res.data.length > 0) {
      dataList.value = [...dataList.value, ...res.data]
      pageNo.value++
    } else {
      finished.value = true
    }
  } catch (error) {
    finished.value = true
  }
  loading.value = false
}

onMounted(() => {
  loadMore()
})
</script>

<style scoped>
.table-container {
  width: 100%;
  font-size: 32px;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  padding: 20px 0;
  border-radius: 10px 10px 0 0;
}

.header-cell {
  text-align: center;
  font-weight: bold;
}

.table-body {
  border: 1px solid #eee;
  border-top: none;
}

.table-row {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.body-cell {
  flex: 1;
  text-align: center;
  flex-shrink: 0;
}

/* 序号列特殊宽度 */
.header-cell:first-child {
  padding-left: 10px;
}
.header-cell:first-child,
.body-cell:first-child {
  flex: 0 0 90px;
}
/* 序号列特殊宽度 */
.header-cell:last-child {
  padding-right: 10px;
}
.header-cell:last-child,
.body-cell:last-child {
  flex: 0 0 140px;
}

/* 其他列保持自动分配宽度 */
.header-cell:not(:first-child):not(:last-child),
.body-cell:not(:first-child):not(:last-child) {
  flex: 1;
}

/* 新增局部容器样式 */
.scroll-container {
  height: 900px; /* 设置容器高度 */
  overflow-y: auto; /* 启用垂直滚动 */
}

.loading-text,
.finished-text {
  text-align: center;
  padding: 20px;
  font-size: 28px;
  color: #666;
}
</style>
<style>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
